/**
    弹出的搜索
        *为必传属性

        目前只有底部弹出 顶部的和侧面的在补

        本想着从上、下、左、右弹出的样式不一样的 所以分了bottom的子组件(bottom最先写的)；但写着写着发现一样的好像也不差；/捂脸.png

        props
            *value[bool = false] 组件是否显示 通过v-model绑定
            title[string = '筛选'] 标题 传空的话不显示标题栏
            position[string = 'bottom'] 显示时弹出的位置
            getContainer[string = 'body'] 挂载节点
            searchData[array = []] 搜索项的数据结构
            autoClose[bool = true] 操作底部btn后自动关闭组件
            searchText[string = '搜索'] 搜索的文本
            resetText[string = '重置'] 重置的文本

            searchData 说明
                *type[string] 搜索项的类型 目前支持input|radio|checkbox|date|date-range|date-multiple|switch
                *key[string | array] 搜索的字段名（就是后端接受的字段名）
                label[string] 搜索项的标签名
                placeholder[string] 搜索项的占位文本生效
                columns[array | object] 选项 (radio|checkbox|switch)生效
                value[string | array] 搜索项的值
                vantOps[object = {}] 搜索项中用到的vant组件库的配置项
                vantId[string = searchData.key] 搜索项的中vant组件的ref
                formatValue[string = 'yyyy-MM-dd'] 日期回显和值的格式化 (date|date-range|date-multiple)生效
                join[string = '至'] 日期范围回显的拼接 (date-range|date-multiple)生效

                key 说明
                    if (type=date-range) 选择日期范围
                        if (key=string) 最终emit出来的值为','号拼接
                        if (key=array) 最终emit出来的值为 array[0]开始日期字段 array[1]结束日期字段
                    else 都是 key=string

                columns 说明
                    if (type=radio|type=checkbox)
                        if (colums=array)
                            code: '1', // 值 键名code不可变更
                            name: '选项1' // 显示文本 值名name不可变更
                        if (colums=object)
                            arr 选项
                            code[string = 'code'] 配置arr中键名
                            name[string = 'name'] 配置arr中值名
                    if (type=switch)
                        [0, 1] 默认值 0=>关闭的值 1=>打开的值
        
        emit
            btn:click 点击底部操作按钮触发
                type[string] search点的搜索 reset点的重置
                data[object] 由props.searchData.key组成键值对（就是要搜索的对象）
 */

<template>
    <v-popup v-model="visible" round close-on-popstate :position="position" :get-container="getContainer">
        <component :is="componentName" :position="position"></component>
    </v-popup>
</template>

<script>
import vPopup from '../vant/v-popup.vue'
import bottom from './sub/bottom.vue'

export default {
    provide () {
        return {
            popupVm: this
        }
    },
    components: {
        vPopup,
        bottom
    },
    props: {
        // 组件是否显示
        value: {
            type: Boolean,
            default: false,
            required: true
        },
        // 弹窗标题
        title: {
            type: String,
            default: '筛选'
        },
        // 弹出的位置
        position: {
            type: String,
            default: 'bottom'
        },
        // 指定挂载的节点
        getContainer: {
            default: 'body'
        },
        // 搜索数据
        searchData: {
            type: Array,
            default: _ => ([])
        },
        // 操作底部btn后自动关闭组件
        autoClose: {
            type: Boolean,
            default: true
        },
        // 搜索的文本
        searchText: {
            type: String,
            default: '确定'
        },
        // 重置的文本
        resetText: {
            type: String,
            default: '重置'
        }
    },
    data () {
        return {
            componentName: 'bottom'
        }
    },
    computed: {
        // 组件是否显示
        visible: {
            get () {
                return this.value
            },
            set (val) {
                this.$emit('input', val)
            }
        }
    }
}
</script>
